<template>
      <el-row gutter="20">
         <el-col :span="3" v-for="item,index in iconNavs" :key="index" @click="NavClick(item.path)"> 
          <div class="flex flex-col justify-center items-center bg-light-100  mt-5   h-32 rounded cursor-pointer">
            <div class="icon h-5 w-5"> <component :is="item.icon" class="image" :class="item.color" ></component></div>
             <span>{{ item.title }}</span>
          </div>
      </el-col>
     
       </el-row>
</template>

<script setup>
import { useRouter } from "vue-router"

const iconNavs = [
        {
            icon:"user",
            color:"text-light-blue-500",
            title:"用户",
            path:"/user/list"
        },
        {
            icon:"shopping-cart",
            color:"text-violet-500",
            title:"商品",
            path:"/goods/list"
        },
        {
            icon:"tickets",
            color:"text-fuchsia-500",
            title:"订单",
            path:"/order/list"
        },
        {
            icon:"chat-dot-square",
            color:"text-teal-500",
            title:"评价",
            path:"/comment/list"
        },
        {
            icon:"picture",
            color:"text-rose-500",
            title:"图库",
            path:"/image/list"
        },
        {
            icon:"bell",
            color:"text-green-500",
            title:"公告",
            path:"/notice/list"
        },
        {
            icon:"set-up",
            color:"text-grey-500",
            title:"配置",
            path:"/setting/base"
        },
        {
            icon:"files",
            color:"text-yellow-500",
            title:"优惠券",
            path:"/coupon/list"
        }
]

//点击事件
const router = useRouter();
const NavClick = (path) => {
    router.push(path);
  }
    
</script>

<style lang="less" scoped>
  
</style>